<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .search {
            width: 600px;
            height: 30px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .search ul{
            background-color: #eee;
            width: 500px;
        }
        form {
            width: 600px;
            height: 30px;
            
        }
        input {
            border: 0;
            outline: none;
            width: 500px;
            height: 28px;
        }
        .button {
            width: 95px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="search" id = 'search1'>
        <form action="#">
            <input type="search" placeholder="请输入要搜索的内容" id = 'search'>
            <input type="button" class="button" value = '搜索'>
        </form>
        <ul id = 'ul'></ul>
    </div>
    <script>
        var keywords = [ "广东人", "广东人爱吃", "广东人爱吃福建人","王宝强","王宝强的经纪人","王宝强的老婆","林丹出轨门","林丹夺冠","123","1234","2341","林丹的生平","JavaScript","Java","王思聪","王健林","社会王","隔壁老王"];
        //获取元素
        var search = document.getElementById('search');
        var search1 = document.getElementById('search1');
        var ul = document.getElementById('ul');
        // 注册事件
        //输入文字时,自动匹配相关内容,然后生成列表
        search.onkeyup = function() {
            var text = search.value;
            
            //删除之前生成的列表,以便匹配新的
            for(var j = 0; j < ul.children.length; j++) {
                var li = ul.children[j];
                ul.removeChild(li);
                j--;
            } 
            if(text == '') {
                return;
            }
            // 在关键词里面查找匹配输入的元素
            for (var i = 0; i < keywords.length; i++) {
                if(keywords[i].indexOf(text) != -1) {
                    var li = document.createElement('li');
                    ul.appendChild(li);
                    li.innerText = keywords[i];
                    li.onmouseover = function() {
                        //设置列表鼠标经过的样式
                        for(var i = 0; i < ul.children.length; i++) {
                            if(ul.children[i] == this) {
                                this.style.backgroundColor = 'red';
                            } else {
                                ul.children[i].style.backgroundColor = '';
                            }
                        }
                    }
                    li.onmouseout = function() {
                        for(var i = 0; i < ul.children.length; i++) {
                            ul.children[i].style.backgroundColor = '';
                        }
                    }
                    li.onclick = function() {
                        search.value = this.innerText;
                        //当选中某个关键词输入搜索框时,会删除列表
                        for(var j = 0; j < ul.children.length; j++) {
                            var li = ul.children[j];
                            ul.removeChild(li);
                            j--;
                        } 
                        
                    }
                }
            }  
        }
    </script>
</body>
</html>